<style lang="less" scoped>
    .counter-box{
        width: 110px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid #F0F0F0;
        background: #fff;
        .counter-box_jian{
            width: 34px;
            display: block;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #e5e5e5;
            background: url(../../assets/images/min.png) no-repeat
            
        }
        .counter-box_jian>img{
            width: 20px;
            height: 20px;
        }
        .b-l-1{
            border-left: 1px solid #e5e5e5;
        }
        .counter-box_input{
            display: inline-block;
            flex: 1;
            text-align: center;
        }
    }
</style>
<template>
    <div class="counter-box">
        <span class="counter-box_jian" @click.stop.prevent="minValue">
            <img :src="minIcon"/>
        </span>
        <input type="number" class="counter-box_input" v-model="value" @input="setValue" />
        <span class="counter-box_jian b-l-1" @click.stop.prevent="addValue">
            <img :src="addIcon"/>
        </span>
    </div>
</template>

<script>
import minIcon from '@/assets/images/min.png'
import addIcon from '@/assets/images/add.png'
export default {
    props: {
        count: {
            default:1,
            type:[String,Number]
        }
    },
    data(){
        return {
            value:1,
            minIcon: minIcon,
            addIcon: addIcon
        }
    },
    mounted(){
        this.value = this.count
    },
    methods: {
        setValue(){
            this.value = this.value.replace(/[^\d]/g,'')
            this.$emit('setCount', this.value )
        },
        minValue() {
            this.value = this.value <= 1 ? 1 : --this.value
            this.$emit('setCount', this.value )
        },
        addValue() {
            this.value = ++this.value
            this.$emit('setCount', this.value )
        }
    }
}
</script>

